import "./index.less"
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Input, Checkbox, Button, message } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { useEffect, useState, useCallback } from "react";
import Captcha from 'react-captcha-code';


interface props {
    setLogin: Function,
}




export default function Setup(props: props) {
    let [userInfo, setUseInfo] = useState({
        account: '',
        password: ''
    })

    let [isRemenber, setIsRemenber] = useState<boolean>(false)

    const onChange = (e: CheckboxChangeEvent) => {
        console.log(e.target.checked);

        setIsRemenber(e.target.checked)
        setChecked(e.target.checked);
    }
    useEffect(() => {
        let userInfo = JSON.parse(window.localStorage.getItem("user") as string)
        if (userInfo) {
            setUseInfo(userInfo)
            setChecked(true)
        } else {
            setChecked(false)
        }
    }, [])

    const login = () => {

        if (!code ) {
            setType('error')
            message.error("请输入验证码")
            return
        }
        if(code != value){
            setType('error')
            message.error("验证码错误")
            return
        }
        props.setLogin(userInfo, isRemenber, type)
    }
    const InputChange = (e: any, key: string) => {
        setUseInfo({
            ...userInfo,
            [key]: e.target.value
        })
    }

    const [code, setCode] = useState()

    const [type, setType] = useState<any>()

    const [checked, setChecked] = useState(true);
    const [value, setValue] = useState();
    const handleClick = useCallback((captcha: any) => {
        setCode(captcha)
    }, []);
    const codeBlur = (e: any) => {
        setValue(e.target.value)
        if (code != e.target.value) {
            setType('error')
        } else {
            setType('')
        }
    }
    return (
        <div className="setup flex_j_c">
            <div className="setup_title flex_a_j">
                <div className="line"></div>
                <div className="login_Tname flex_a_b">
                    <span>用</span>
                    <span>户</span>
                    <span>登</span>
                    <span>录</span>
                </div>
                <div className="line"></div>
            </div>
            <div className="login_center flex_a_j_c">
                <div className="item">
                    <Input size="large" placeholder="请输入账号/手机号" prefix={<UserOutlined />} onChange={e => InputChange(e, "account")} value={userInfo.account} />
                </div>
                <div className="item">
                    <Input.Password size="large" placeholder="请输入密码" prefix={<LockOutlined />} onChange={e => InputChange(e, "password")} value={userInfo.password} />
                </div>
                <div className="item code">
                    <div className="enterCode">
                        <Input size="large" placeholder="请输入验证码" status={type} onBlur={e => { codeBlur(e) }} allowClear />
                    </div>
                    <Captcha charNum={4} onChange={handleClick} />
                </div>
            </div>
            <div className="sessionPas flex_a">
                <Checkbox onChange={onChange} checked={checked}>记住密码</Checkbox>
                {/* <div className="register">点击注册</div> */}
            </div>
            <div className="setup_btn flex_a_j">
                <Button type="primary" className="Btn flex_a_j" onClick={login}>登&emsp;录</Button>
            </div>
            <div className="icon_bottom flex_a_j">
                <img src="/image/react.svg" alt="" />&nbsp;
                <span>学习·一往无前</span>
            </div>
        </div>
    )
}